<template>
	<div>
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko" @click="jiant">
					<van-icon name="arrow-left" />
				</div>
				<div slot="title" class="cellbox" @click="jiant">返回</div>
			</van-cell>
			<div class="wenzitis">
				<h2>邮箱注册 </h2>
			</div>
		</div>
		<!-- 注册表单 -->
		<div class="inputBxo">
			<van-form @submit="onSubmit">
				<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" @blur="onblur"  :rules="[{ required: true, message: '请填写用户名' }]"/>
				<van-field v-model="useremail" name="邮箱" label="邮箱" placeholder="邮箱" :rules="[{ required: true, message: '请填写邮箱' }]" />
				<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
				<div class="wd">
					<van-button round block type="info" native-type="submit" color="#343434">提交</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	import {
		Cell,
		CellGroup,
		Toast
	} from 'vant';
	import {
		Icon
	} from 'vant';
	import {
		Form
	} from 'vant';
	import {
		Field
	} from 'vant';
	import {
		Button
	} from 'vant';
	export default {
		data() {
			return {
				username: '',
				useremail: '',
				password: '',
				ishas: false
			};
		},
		methods: {
			// 注册，直接在请求地址的后面传参
			
				onSubmit(values) {
					if(this.ishas == true) {
						Toast({
							message: '用户名已存在',
							duration: 1000
						});
					
				
			} else {
				this.$get(this.$API.USERS_REGISTER, {
						username: this.username,
						email: this.useremail,
						password: this.password
				}).then(res => {
					console.log(res)
					Toast.success('注册成功');
					this.username = ''
					this.email = ''
					this.password = ''
					this.$router.push({
						path: '/login'
					})
				
				}).catch(err => {
					console.log(err)
				})
			}
			},
			jiant() {
				this.$router.push({
					path: '/login'
				})
			},
			onblur(e) {
				console.log(e)
				this.$get(this.$API.USERS_ISHAS, {
						username:this.username
				}).then(res => {
					console.log(res.data)
					this.ishas = res.data.ishas
					if (res.data.ishas == true) {
						Toast({
							message: '用户名已存在',
							// duration: 1000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
		components: {
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
			[Form.name]: Form,
			[Field.name]: Field,
			[Button.name]: Button,
			[Toast.name]: Toast,
		},
		
	}
</script>

<style lang="less" scoped>
	@width: 100vw;
	@white: white;

	.header {
		width: @width;
		height: 180px;
		background-color: #343434;

		.cellbox {
			font-size: 15px;

		}

		.iconko {
			font-size: 20px;
			padding-right: 15px;
		}

		.wenzitis {
			height: 130px;
			color: @white;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0px 26px;
			box-sizing: border-box;
			line-height: 40px;

			>div {
				font-size: 15px;
			}
		}
	}

	.inputBxo {
		width: @width;
		margin-top: 20px;

		.van-cell {
			margin-bottom: 10px;
		}

		.wd {
			width: 80vw;
			margin: 40px auto;
		}
	}
</style>
